<!-- 采购计划列表 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>采购计划列表</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css" />
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none" v-show="showApp">
        <div class="content_box">
            <div class="table_box" ref="tablebox">
                <el-table :span-method="objectSpanMethod" :data="tableData" :select-on-indeterminate="false"
                          @select="select" @select-all="selectall" :row-class-name="tableRowClassName" height="100%" border
                          :cell-style="{background:'#fff'}" @row-click="rowclick" ref="multipleTable"
                          @selection-change="selectionchange" header-row-class-name="table_th" style="width: 100%">
                    <el-table-column type="selection" align="center" width="50"> </el-table-column>

                    <el-table-column prop="typeid" label="序号" align="center" width="50"> </el-table-column>

                    <el-table-column prop="title" label="计划标题" align="center" show-overflow-tooltip min-width="90">
                    </el-table-column>

                    <el-table-column prop="createUserName" label="录入人" align="center" show-overflow-tooltip
                                     min-width="70">
                    </el-table-column>

                    <el-table-column prop="createTime" min-width="140" label="录入时间" align="center"
                                     show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="x_materialName" min-width="90" label="材料名称" align="center"
                                     show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="x_specificationName" min-width="90" label="规格型号" align="center"
                                     show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="x_useFor" min-width="90" label="使用部位" align="center" show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="x_purchaseQuantity" min-width="90" label="计划数量" align="center"
                                     show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="x_approachNum" min-width="140" label="已关联进场数量" align="center"
                                     show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span style="color: #F70505;"
                                  v-if="parseFloat(scope.row.x_approachNum) > parseFloat(scope.row.x_purchaseQuantity)">{{scope.row.x_approachNum}}</span>
                            <span style="color: #30C776;"
                                  v-if="parseFloat(scope.row.x_approachNum) == parseFloat(scope.row.x_purchaseQuantity)">{{scope.row.x_approachNum}}</span>
                            <span style="color: #FF9F0F;"
                                  v-if="parseFloat(scope.row.x_approachNum) < parseFloat(scope.row.x_purchaseQuantity)">{{scope.row.x_approachNum}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="x_unit" min-width="110" label="单位" align="center" show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column prop="x_status" min-width="120" label="当前状态" align="center" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.x_status == 0">待审核</span>
                            <span v-if="scope.row.x_status == 1">通过</span>
                            <span v-if="scope.row.x_status == -1">审核不通过</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination_box" ref="paginations">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="pageindex" :page-sizes="[20, 100, 200, 300, 400]" :page-size="pagesize"
                               layout="total, sizes, prev, pager, next, jumper" :total="totals"> </el-pagination>
            </div>
        </div>
        <div class="but_box">
            <el-button class="cancelClass" @click="cancel">取消</el-button>
            <el-button type="primary" @click="confirms" style="margin-left: 120px">提交</el-button>
        </div>
        <div class="hidden_box">
            <input id="publicValue" value="" type="text">
        </div>
    </div>
    <script src="../js/public.js?12345"></script>
    <script>
        var layer = layui.layer;
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    pagesize: 20,
                    pageindex: 1,
                    selected: [],
                    selectid: '',
                    totals: 0,
                    projectId: '',
                    tableData: [],
                    allButData: []
                };
            },
            methods: {
                // 取消
                cancel() {
                    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                },
                // 提交
                confirms() {
                    if (this.selected.length == 0) {
                        this.$message({
                            message: '请选择',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var data = JSON.stringify(this.selected);
                    parent.$('#publicValue').val(data);
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    }, 100);

                },
                // 斑马线
                tableRowClassName(value) {
                    var classname = '';
                    if (value.row.typeid % 2 > 0) {
                        classname = 'success-row';
                    } else if (value.row.typeid % 2 === 0) {
                        classname = 'warning-row';
                    }
                    if (value.row.typeid === this.selectid) {
                        classname = classname + ' selected-row';
                    }
                    return classname;
                },
                selectall() {
                    this.$refs.multipleTable.clearSelection();
                },
                select(selection, row) {
                    if (selection.length > 1) {
                        var del_row = selection.shift()
                        for (var i = 0; i < this.tableData.length; i++) {
                            if (del_row.typeid == this.tableData[i].typeid) {
                                this.$refs.multipleTable.toggleRowSelection(this.tableData[i], false);
                            }
                        }
                    }
                },
                // 点击某一行选择
                rowclick(row, column, event) {
                    this.$refs.multipleTable.clearSelection();
                    if (row) {
                        for (var i = 0; i < this.tableData.length; i++) {
                            if (row.typeid == this.tableData[i].typeid) {
                                this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
                            }
                        }
                    }
                },
                selectionchange(val) {
                    this.selected = val;
                    if (val.length > 0) {
                        this.selectid = val[0].typeid
                    } else {
                        this.selectid = ''
                    }
                },
                // 每页显示条数切换
                handleSizeChange(val) {
                    this.pagesize = val;
                    this.pageindex = 1;
                    this.getCgjhListData()
                },
                // 页数切换
                handleCurrentChange(val) {
                    this.pageindex = val;
                    this.getCgjhListData()
                },
                // 合并单元格
                objectSpanMethod(item) {
                    if (item.columnIndex == 0 || item.columnIndex == 1 || item.columnIndex == 2 || item.columnIndex == 3 || item.columnIndex == 4) {
                        return {
                            rowspan: item.row.hbhs,
                            colspan: item.row.hbhs > 0 ? 1 : 0
                        };
                    }
                },
                // 获取采购计划列表
                getCgjhListData() {
                    var that = this
                    var data = {
                        projectId: that.projectId,
                        page: that.pageindex,
                        pageSize: that.pagesize
                    }
                    if (that.isSelect && parseInt(that.isSelect) === 1) {
                        data.auditStatus = 1;
                    }

                    xLoading(true)
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/ConstructionPlan/GetBuyPlanList',
                        data: JSON.stringify(data),
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            var allData = []
                            for (var i = 0; i < res.data.length; i++) {
                                res.data[i].hbhs = 1
                                res.data[i].typeid = i + 1
                                if (res.data[i].planMatList && res.data[i].planMatList.length > 0) {
                                    for (var j in res.data[i].planMatList[0]) {
                                        res.data[i]['x_' + j] = res.data[i].planMatList[0][j]
                                    }
                                }
                                allData.push(res.data[i])
                                for (var j = 1; j < res.data[i].planMatList.length; j++) {
                                    res.data[i].planMatList[j].hbhs = 0
                                    res.data[i].planMatList[j].typeid = i + 1
                                    var newobj = {}
                                    for (var k in res.data[i].planMatList[j]) {
                                        if (k == 'hbhs' || k == 'typeid') {
                                            newobj[k] = res.data[i].planMatList[j][k]
                                        } else {
                                            newobj['x_' + k] = res.data[i].planMatList[j][k]
                                        }
                                    }
                                    allData.push(newobj)
                                }
                            }
                            for (var i = 0; i < allData.length; i++) {
                                if (allData[i].planMatList && allData[i].planMatList.length > 0) {
                                    allData[i].hbhs = allData[i].planMatList.length
                                }
                            }
                            that.tableData = allData
                            that.totals = res.total
                        }
                    });
                },

                publicBut(item) {
                    if (item.event == 'Add') {
                        this.addBut()
                    }
                    if (item.event == 'Edit') {
                        this.examineBut()
                    }
                    if (item.event == 'View') {
                        this.checkBut()
                    }
                    if (item.event == 'Approval') {
                        this.examineBut()
                    }
                },
                // 审核
                examineBut() {
                    var that = this
                    if (this.selected.length == 0) {
                        this.$message({
                            message: '请选择一条数据',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var that = this
                    layer.open({
                        type: 2,
                        title: '审核采购计划',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['56.7%', '89.8%'],
                        content: 'examineCgjh.html?cgjhId=' + that.selected[0].id + '&projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            that.getCgjhListData();
                        }
                    });
                },
                // 查看
                checkBut() {
                    if (this.selected.length == 0) {
                        this.$message({
                            message: '请选择一条数据',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var that = this
                    layer.open({
                        type: 2,
                        title: '查看采购计划',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['56.7%', '89.8%'],
                        content: 'checkCgjh.html?cgjhId=' + that.selected[0].id + '&projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                        }
                    });
                },
                // 修改
                editBut() {
                    if (this.selected.length == 0) {
                        this.$message({
                            message: '请选择一条数据',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    var that = this
                    layer.open({
                        type: 2,
                        title: '修改采购计划',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['56.7%', '89.8%'],
                        content: 'editCgjh.html?cgjhId=' + that.selected[0].id + '&projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            that.getCgjhListData();
                        }
                    });
                },
                // 添加
                addBut() {
                    var that = this
                    layer.open({
                        type: 2,
                        title: '添加采购计划',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['56.7%', '89.8%'],
                        content: 'addCgjh.html?projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            that.getCgjhListData();
                        }
                    });
                },

                getButList() {
                    var that = this
                    $.ajax({
                        type: 'post',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        url: baseUrl + '/Common/GetButtonList',
                        data: JSON.stringify({
                            pagename: '采购计划'
                        }),
                        dataType: 'json',
                        success: function (res) {
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.allButData = res.data
                        }
                    });
                }
            },
            mounted() {
                this.showApp = true;
                var that = this;
                setTimeout(function () {
                    var aa = that.$refs.paginations.offsetHeight;
                    var ss = 'calc(100% - ' + aa + 'px)';
                    that.$refs.tablebox.style.height = ss;
                }, 2);
                this.projectId = getQuerys('projectId')
                this.isSelect = getQuerys("isSelect") || null;
                this.getCgjhListData()
                // this.getButList()
                // this.getQuerys()
            }
        });
    </script>
</body>
<style>
    .content_box {
        height: calc(100% - 70px);
    }

    .page-container {
        width: 100%;
        height: 100%;
        padding: 16px;
    }

    /* 按钮 */
    .top_but_box {
        display: flex;
        padding: 16px 0;
    }

        .top_but_box .el-button {
            padding: 0;
            margin: 0;
            height: 32px;
            background: transparent;
            border: 1px solid #5574D7;
            border-radius: 5px;
            margin-right: 20px;
        }

        .top_but_box .but_cont {
            display: flex;
            padding: 0 16px;
            color: #5574D7;
            align-items: center;
        }

            .top_but_box .but_cont .but_txt {
                margin-left: 10px;
            }

        .top_but_box .el-button:focus,
        .top_but_box .el-button:hover {
            color: rgba(85, 116, 215, 1);
            border-color: rgba(85, 116, 215, 0.1);
            background-color: #ecf5ff;
        }

            .top_but_box .el-button:focus .but_cont,
            .top_but_box .el-button:hover .but_cont {
                color: rgba(85, 116, 215, 0.8);
            }

        .top_but_box .el-button:active {
            color: rgba(85, 116, 215, 0.8);
            border-color: rgba(85, 116, 215, 0.8);
            outline: none;
        }

            .top_but_box .el-button:active .but_cont {
                color: rgba(85, 116, 215, 0.8);
            }

    /* 分页 */
    .pagination_box {
        padding: 2.7vh 0 3.7vh;
    }

    .el-pagination {
        display: flex;
        justify-content: center;
    }

    .pagination_box .el-pagination button {
        border: 1px solid #D6D6D6;
        border-radius: 5px !important;
        background-color: transparent !important;
    }

    .pagination_box .el-pager li {
        border-radius: 5px !important;
        border: 1px solid #D6D6D6 !important;
        background: transparent !important;
    }

    .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #5574D7;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #5574D7 !important;
        border: none !important;
        color: #fff;
    }

    /* 表格 */
    .el-table th.gutter {
        display: table-cell !important;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #f8f8f8;
    }

    .el-table th {
        background: linear-gradient(0deg, #F5F7FA, #ECEFF6, #F5F7FA);
    }

    .table_th {
        box-shadow: 0px 1px 1px 0px rgba(234, 235, 240, 0.75), 0px 1px 1px 0px #F7F8FA;
    }

    .el-table td,
    .el-table th {
        color: #333333;
        padding: 0;
        height: 32px;
    }

    .el-tooltip__popper.is-dark {
        background: #FFFFFF;
        color: #333333;
        box-shadow: 0px 1px 8px 0px rgba(97, 97, 97, 0.6);
    }

    .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
        border-top-color: #FFFFFF;
    }

    .el-tooltip__popper[x-placement^=top] .popper__arrow {
        border-top-color: #FFFFFF;
    }

    .el-table--border:after,
    .el-table--group:after,
    .el-table:before {
        background-color: #E2E2E2;
    }

    .el-table--border,
    .el-table--group {
        border-color: #E2E2E2;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #E2E2E2;
    }

    .el-table--border th,
    .el-table--border th.gutter:last-of-type {
        border-bottom: 1px solid #E2E2E2;
    }

    .el-table--border td,
    .el-table--border th {
        border-right: 1px solid #E2E2E2;
    }

    .success-row td {
        background: #ffffff !important;
    }

    .warning-row td {
        background: #F8F8F8 !important;
    }

    .selected-row td {
        background: rgba(85, 116, 215, 0.1) !important;
    }
</style>

</html>